import React, { useState } from 'react';
import { 
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, 
  PieChart, Pie, Cell, LineChart, Line 
} from 'recharts';
import { 
  LayoutDashboard, 
  ShoppingCart, 
  CreditCard, 
  Users, 
  TrendingDown, 
  TrendingUp,
  FileText,
  Search,
  Filter,
  Table as TableIcon
} from 'lucide-react';

const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];

const App = () => {
  const [activeTab, setActiveTab] = useState('overview');

  // --- DATA ---
  const importVsLocal = [
    { name: 'Foreign Imports', value: 4087, percentage: 56, orders: 141 },
    { name: 'Local Purchases', value: 3248, percentage: 44, orders: 1315 },
  ];

  const transactionTrends = [
    { category: 'General Goods', q4_2025: 1104, q4_2024: 1537, change: -28 },
    { category: 'Critical Stocks', q4_2025: 351, q4_2024: 435, change: -19 },
  ];

  const paymentTerms = [
    { name: 'Prepayment', value: 1321, current: 21, target: 10 },
    { name: '14-day Credit', value: 128, current: 2, target: 5 },
    { name: '30+ day Credit', value: 4944, current: 77, target: 85 },
  ];

  const supplierData = [
    { category: 'Feed', supplier: 'In2 Feed', q4_2025: 3015.2, q4_2024: 4478.0, change: -33 },
    { category: 'Feed', supplier: 'Penguin Fishing', q4_2025: 75.5, q4_2024: 71.9, change: 5 },
    { category: 'Capex', supplier: 'ACT (Thailand) Co. Ltd', q4_2025: 381.8, q4_2024: 403.0, change: -5 },
    { category: 'Chemicals', supplier: 'DF trading (Dyna Fog)', q4_2025: 93.4, q4_2024: 117.6, change: -21 },
    { category: 'R&M', supplier: 'Under Control', q4_2025: 70.3, q4_2024: 105.6, change: -33 },
    { category: 'Medicines', supplier: 'V-Tech', q4_2025: 29.4, q4_2024: 70.5, change: -58 },
  ];

  // Report 1: Value of Imports vs Local
  const report1Data = [
    { desc: 'Value of Foreign Imports – US$000s', q4_25: '4,087', q4_25_pct: '56%', q4_24: '6,390', q4_24_pct: '60%', fy_26: '3,806', fy_26_pct: '60%' },
    { desc: 'No of Foreign purchasing orders', q4_25: '141', q4_25_pct: '10%', q4_24: '241', q4_24_pct: '12%', fy_26: '150', fy_26_pct: '11%' },
    { desc: 'Value of Local Purchases – US$000s', q4_25: '3,248', q4_25_pct: '44%', q4_24: '4,267', q4_24_pct: '40%', fy_26: '2,551', fy_26_pct: '40%' },
    { desc: 'No of Local purchasing orders', q4_25: '1,315', q4_25_pct: '90%', q4_24: '1,731', q4_24_pct: '88%', fy_26: '1,274', fy_26_pct: '89%' },
    { desc: 'Total purchases in period – US$000s', q4_25: '7,335', q4_25_pct: '100%', q4_24: '10,657', q4_24_pct: '100%', fy_26: '6,357', fy_26_pct: '100%' },
  ];

  // Report 4: Major Foreign Suppliers
  const report4Data = [
    { supplier: 'In2 Feed', category: 'Feed', q4_25: '3,015.2', q4_24: '4,478.0', change: '-33%', fy_26: '2,088.0' },
    { supplier: 'Penguin Fishing', category: 'Feed', q4_25: '75.5', q4_24: '71.9', change: '5%', fy_26: '100.0' },
    { supplier: 'ACT Thailand', category: 'Capex', q4_25: '381.8', q4_24: '403.0', change: '-5%', fy_26: '550.0' },
    { supplier: 'DF Trading', category: 'Chemicals', q4_25: '93.4', q4_24: '117.6', change: '-21%', fy_26: '150.0' },
    { supplier: 'V-Tech', category: 'Medicines', q4_25: '29.4', q4_24: '70.5', change: '-58%', fy_26: '100.0' },
  ];

  // Report 5: Payment Terms
  const report5Data = [
    { supplier: 'Integrated Hygiene', goods: 'Chemicals', current: '14 days', target: '30 days', date: 'Jun-25' },
    { supplier: 'PPC Zimbabwe Limited', goods: 'Cement', current: 'Prepayment', target: '30 days', date: 'Mar-26' },
    { supplier: 'Chisseller Services', goods: 'Feed', current: 'Prepayment', target: '30 days', date: 'Jun-25' },
    { supplier: 'Intofeed Pvt Ltd', goods: 'Feed', current: '30 days', target: '30 days', date: 'Met' },
    { supplier: 'Strauss Logistics', goods: 'Fuels', current: '30 days', target: '30 days', date: 'Met' },
  ];

  // --- RENDER HELPERS ---
  const Card = ({ title, children, className = "" }) => (
    <div className={`bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden ${className}`}>
      <div className="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
        <h3 className="font-semibold text-slate-800 uppercase text-xs tracking-wider">{title}</h3>
      </div>
      <div className="p-6">{children}</div>
    </div>
  );

  const StatBox = ({ label, value, subtext, trend, icon: Icon }) => (
    <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm">
      <div className="flex justify-between items-start mb-4">
        <div className="p-2 bg-blue-50 text-blue-600 rounded-lg">
          <Icon size={20} />
        </div>
        {trend && (
          <span className={`flex items-center text-xs font-medium px-2 py-1 rounded-full ${trend < 0 ? 'bg-red-50 text-red-600' : 'bg-green-50 text-green-600'}`}>
            {trend > 0 ? <TrendingUp size={12} className="mr-1"/> : <TrendingDown size={12} className="mr-1"/>}
            {Math.abs(trend)}%
          </span>
        )}
      </div>
      <div className="text-2xl font-bold text-slate-900">{value}</div>
      <div className="text-sm text-slate-500 mt-1">{label}</div>
      {subtext && <div className="text-xs text-slate-400 mt-1">{subtext}</div>}
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
      {/* Header */}
      <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="bg-blue-600 p-2 rounded-lg">
              <ShoppingCart className="text-white" size={20} />
            </div>
            <h1 className="text-xl font-bold tracking-tight">ProcureMetrics <span className="text-slate-400 font-normal">| Dashboard</span></h1>
          </div>
          <div className="flex items-center gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
              <input 
                type="text" 
                placeholder="Search metrics..." 
                className="pl-10 pr-4 py-2 border border-slate-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-64"
              />
            </div>
            <div className="h-8 w-8 rounded-full bg-slate-200 flex items-center justify-center font-medium text-slate-600 text-sm">
              JD
            </div>
          </div>
        </div>
      </header>

      {/* Main Layout */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col md:flex-row gap-8">
        
        {/* Navigation */}
        <aside className="w-full md:w-64 space-y-1">
          <button 
            onClick={() => setActiveTab('overview')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'overview' ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'text-slate-600 hover:bg-slate-100'}`}
          >
            <LayoutDashboard size={18} /> Overview
          </button>
          <button 
            onClick={() => setActiveTab('tables')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'tables' ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'text-slate-600 hover:bg-slate-100'}`}
          >
            <TableIcon size={18} /> Raw Tables (5 Reports)
          </button>
          <button 
            onClick={() => setActiveTab('suppliers')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'suppliers' ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'text-slate-600 hover:bg-slate-100'}`}
          >
            <Users size={18} /> Suppliers & Categories
          </button>
          <button 
            onClick={() => setActiveTab('payments')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'payments' ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'text-slate-600 hover:bg-slate-100'}`}
          >
            <CreditCard size={18} /> Payment Terms
          </button>
          <button 
            onClick={() => setActiveTab('transactions')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'transactions' ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'text-slate-600 hover:bg-slate-100'}`}
          >
            <FileText size={18} /> Transactions
          </button>
        </aside>

        {/* Content Area */}
        <main className="flex-1 space-y-6">
          
          <div className="flex items-center justify-between mb-2">
            <div>
              <h2 className="text-2xl font-bold">Procurement Performance</h2>
              <p className="text-slate-500">Full Dataset: Q4 2025 YTD vs Q4 2024 YTD</p>
            </div>
          </div>

          {activeTab === 'overview' && (
            <>
              {/* Top Stats */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <StatBox label="Total Purchase Value" value="$7,335k" trend={-31} icon={ShoppingCart} subtext="US$000s" />
                <StatBox label="Total Orders" value="1,460" trend={-26} icon={FileText} subtext="Volume vs LY" />
                <StatBox label="Foreign Imports" value="$4,087k" trend={-36} icon={LayoutDashboard} subtext="56% of total" />
                <StatBox label="Local Purchases" value="$3,248k" trend={-24} icon={Users} subtext="44% of total" />
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <Card title="Spend Mix: Foreign vs Local">
                  <div className="h-64">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={importVsLocal}
                          cx="50%"
                          cy="50%"
                          innerRadius={60}
                          outerRadius={80}
                          paddingAngle={5}
                          dataKey="value"
                          label={({ name, percentage }) => `${name} (${percentage}%)`}
                        >
                          {importVsLocal.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                          ))}
                        </Pie>
                        <Tooltip formatter={(value) => `$${value}k`} />
                        <Legend />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                </Card>

                <Card title="Payment Terms Profile (Target vs Actual %)">
                  <div className="h-64">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={paymentTerms}>
                        <CartesianGrid strokeDasharray="3 3" vertical={false} />
                        <XAxis dataKey="name" />
                        <YAxis unit="%" />
                        <Tooltip />
                        <Legend />
                        <Bar dataKey="current" name="Current %" fill="#3b82f6" radius={[4, 4, 0, 0]} />
                        <Bar dataKey="target" name="Target %" fill="#94a3b8" radius={[4, 4, 0, 0]} />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </Card>
              </div>
            </>
          )}

          {activeTab === 'tables' && (
            <div className="space-y-8 pb-12">
              {/* Report 1 */}
              <Card title="Report 1: Value of Imports vs Local purchases in the period">
                <div className="overflow-x-auto">
                  <table className="w-full text-left text-xs">
                    <thead className="bg-slate-50 border-y border-slate-200">
                      <tr>
                        <th className="px-4 py-3 font-semibold text-slate-700">Description</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4 2025 YTD</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4 2025 %</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4 2024 YTD</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4 2024 %</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">2026 Full Yr</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {report1Data.map((row, idx) => (
                        <tr key={idx} className="hover:bg-slate-50/50">
                          <td className="px-4 py-3 font-medium text-slate-900">{row.desc}</td>
                          <td className="px-4 py-3 text-right">{row.q4_25}</td>
                          <td className="px-4 py-3 text-right text-slate-500">{row.q4_25_pct}</td>
                          <td className="px-4 py-3 text-right">{row.q4_24}</td>
                          <td className="px-4 py-3 text-right text-slate-500">{row.q4_24_pct}</td>
                          <td className="px-4 py-3 text-right font-medium text-blue-600">{row.fy_26}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>

              {/* Report 2 */}
              <Card title="Report 2: Number of Transactions (Goods Type Breakdown)">
                <div className="overflow-x-auto">
                  <table className="w-full text-left text-xs">
                    <thead className="bg-slate-50 border-y border-slate-200">
                      <tr>
                        <th className="px-4 py-3 font-semibold text-slate-700">Goods Type</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4 2025 YTD</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4 2024 YTD</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Change %</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">2026 Full Yr</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      <tr>
                        <td className="px-4 py-3 font-medium">No of Orders General Goods</td>
                        <td className="px-4 py-3 text-right">1,104</td>
                        <td className="px-4 py-3 text-right">1,537</td>
                        <td className="px-4 py-3 text-right text-red-600">-28%</td>
                        <td className="px-4 py-3 text-right">1,076</td>
                      </tr>
                      <tr>
                        <td className="px-4 py-3 font-medium">No of Orders Critical Stocks</td>
                        <td className="px-4 py-3 text-right">351</td>
                        <td className="px-4 py-3 text-right">435</td>
                        <td className="px-4 py-3 text-right text-red-600">-19%</td>
                        <td className="px-4 py-3 text-right">348</td>
                      </tr>
                      <tr className="bg-slate-50 font-bold border-t-2 border-slate-200">
                        <td className="px-4 py-3">Total Number of Orders</td>
                        <td className="px-4 py-3 text-right">1,456</td>
                        <td className="px-4 py-3 text-right">1,972</td>
                        <td className="px-4 py-3 text-right text-red-600">-26%</td>
                        <td className="px-4 py-3 text-right">1,424</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </Card>

              {/* Report 3 */}
              <Card title="Report 3: Buyer Efficiency & Workload">
                <div className="overflow-x-auto">
                  <table className="w-full text-left text-xs">
                    <thead className="bg-slate-50 border-y border-slate-200">
                      <tr>
                        <th className="px-4 py-3 font-semibold text-slate-700">Metric</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4 2025 YTD</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4 2024 YTD</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Variance</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      <tr>
                        <td className="px-4 py-3 font-medium">Number of Buyers</td>
                        <td className="px-4 py-3 text-right">2</td>
                        <td className="px-4 py-3 text-right">3</td>
                        <td className="px-4 py-3 text-right text-red-600">-33%</td>
                      </tr>
                      <tr>
                        <td className="px-4 py-3 font-medium">Average Orders per Buyer</td>
                        <td className="px-4 py-3 text-right">728</td>
                        <td className="px-4 py-3 text-right">657</td>
                        <td className="px-4 py-3 text-right text-green-600">+11%</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </Card>

              {/* Report 4 */}
              <Card title="Report 4: Foreign Imports by Major Supplier (US$000s)">
                <div className="overflow-x-auto">
                  <table className="w-full text-left text-xs">
                    <thead className="bg-slate-50 border-y border-slate-200">
                      <tr>
                        <th className="px-4 py-3 font-semibold text-slate-700">Supplier</th>
                        <th className="px-4 py-3 font-semibold text-slate-700">Category</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4 2025 YTD</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4 2024 YTD</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">Change %</th>
                        <th className="px-4 py-3 font-semibold text-slate-700 text-right">2026 Forecast</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {report4Data.map((row, idx) => (
                        <tr key={idx} className="hover:bg-slate-50/50">
                          <td className="px-4 py-3 font-medium text-slate-900">{row.supplier}</td>
                          <td className="px-4 py-3 text-slate-500">{row.category}</td>
                          <td className="px-4 py-3 text-right font-medium">${row.q4_25}</td>
                          <td className="px-4 py-3 text-right">${row.q4_24}</td>
                          <td className="px-4 py-3 text-right font-semibold text-red-600">{row.change}</td>
                          <td className="px-4 py-3 text-right text-blue-600">${row.fy_26}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>

              {/* Report 5 */}
              <Card title="Report 5: Profile of payment terms by key supplier">
                <div className="overflow-x-auto">
                  <table className="w-full text-left text-xs">
                    <thead className="bg-slate-50 border-y border-slate-200">
                      <tr>
                        <th className="px-4 py-3 font-semibold text-slate-700">Supplier</th>
                        <th className="px-4 py-3 font-semibold text-slate-700">Goods Supplied</th>
                        <th className="px-4 py-3 font-semibold text-slate-700">Current Credit Terms</th>
                        <th className="px-4 py-3 font-semibold text-slate-700">Target Credit Terms</th>
                        <th className="px-4 py-3 font-semibold text-slate-700">Target Date</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {report5Data.map((row, idx) => (
                        <tr key={idx} className="hover:bg-slate-50/50">
                          <td className="px-4 py-3 font-medium text-slate-900">{row.supplier}</td>
                          <td className="px-4 py-3 text-slate-500">{row.goods}</td>
                          <td className="px-4 py-3">
                             <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${row.current === 'Prepayment' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-600'}`}>
                                {row.current}
                             </span>
                          </td>
                          <td className="px-4 py-3 font-semibold text-blue-600">{row.target}</td>
                          <td className="px-4 py-3 font-medium">{row.date}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>
            </div>
          )}

          {/* Previous views preserved below for the other tabs */}
          {activeTab === 'suppliers' && (
            <Card title="Key Suppliers & Variance Analysis">
              <div className="overflow-x-auto">
                <table className="w-full text-left text-sm">
                  <thead className="bg-slate-50 border-y border-slate-200">
                    <tr>
                      <th className="px-4 py-3 font-semibold text-slate-700">Category</th>
                      <th className="px-4 py-3 font-semibold text-slate-700">Supplier</th>
                      <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4-2025 (k)</th>
                      <th className="px-4 py-3 font-semibold text-slate-700 text-right">Q4-2024 (k)</th>
                      <th className="px-4 py-3 font-semibold text-slate-700 text-right">% Change</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {supplierData.map((row, idx) => (
                      <tr key={idx} className="hover:bg-slate-50/50">
                        <td className="px-4 py-3 text-slate-500 font-medium">{row.category}</td>
                        <td className="px-4 py-3 font-medium text-slate-900">{row.supplier}</td>
                        <td className="px-4 py-3 text-right">${row.q4_2025.toFixed(1)}</td>
                        <td className="px-4 py-3 text-right text-slate-500">${row.q4_2024.toFixed(1)}</td>
                        <td className={`px-4 py-3 text-right font-semibold ${row.change < 0 ? 'text-red-600' : 'text-green-600'}`}>
                          {row.change > 0 ? '+' : ''}{row.change}%
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>
          )}

          {activeTab === 'payments' && (
            <Card title="Credit Terms Optimization Tracker">
              <div className="overflow-x-auto">
                <table className="w-full text-left text-sm">
                  <thead className="bg-slate-50 border-y border-slate-200">
                    <tr>
                      <th className="px-4 py-3 font-semibold text-slate-700">Supplier</th>
                      <th className="px-4 py-3 font-semibold text-slate-700">Current Terms</th>
                      <th className="px-4 py-3 font-semibold text-slate-700">Target Terms</th>
                      <th className="px-4 py-3 font-semibold text-slate-700">Target Date</th>
                      <th className="px-4 py-3 font-semibold text-slate-700">Status</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {report5Data.map((row, idx) => (
                      <tr key={idx} className="hover:bg-slate-50/50">
                        <td className="px-4 py-3 font-medium text-slate-900">{row.supplier}</td>
                        <td className="px-4 py-3">
                          <span className={`px-2 py-1 rounded text-xs font-medium ${row.current === 'Prepayment' ? 'bg-orange-50 text-orange-600' : 'bg-slate-100 text-slate-600'}`}>
                            {row.current}
                          </span>
                        </td>
                        <td className="px-4 py-3 font-medium text-blue-600">{row.target}</td>
                        <td className="px-4 py-3 text-slate-500">{row.date}</td>
                        <td className="px-4 py-3 text-xs">
                           {row.date === 'Met' ? 'Compliant' : 'Pending Action'}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>
          )}

          {activeTab === 'transactions' && (
            <div className="grid grid-cols-1 gap-6">
              <Card title="Buyer Efficiency: Orders Per Buyer">
                <div className="flex items-center gap-8 mb-6 p-4 bg-blue-50 rounded-lg">
                  <div>
                    <div className="text-xs text-blue-600 uppercase font-bold tracking-wider mb-1">Current Buyers</div>
                    <div className="text-2xl font-bold">2</div>
                  </div>
                  <div className="h-10 w-px bg-blue-200" />
                  <div>
                    <div className="text-xs text-blue-600 uppercase font-bold tracking-wider mb-1">Orders/Buyer</div>
                    <div className="text-2xl font-bold">728</div>
                  </div>
                  <div className="h-10 w-px bg-blue-200" />
                  <div>
                    <div className="text-xs text-blue-600 uppercase font-bold tracking-wider mb-1">Efficiency Change</div>
                    <div className="text-2xl font-bold text-green-600">+11%</div>
                  </div>
                </div>
                <div className="h-64">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={transactionTrends} layout="vertical">
                        <CartesianGrid strokeDasharray="3 3" horizontal={false} />
                        <XAxis type="number" />
                        <YAxis dataKey="category" type="category" width={100} />
                        <Tooltip />
                        <Legend />
                        <Bar dataKey="q4_2025" name="Q4 2025" fill="#3b82f6" radius={[0, 4, 4, 0]} />
                        <Bar dataKey="q4_2024" name="Q4 2024" fill="#cbd5e1" radius={[0, 4, 4, 0]} />
                      </BarChart>
                    </ResponsiveContainer>
                </div>
              </Card>
            </div>
          )}

        </main>
      </div>
      
      {/* Footer */}
      <footer className="mt-12 py-8 bg-white border-t border-slate-200 text-center">
        <p className="text-slate-400 text-sm">© 2026 Procurement Analytics System • Generated from Metrix Reporting Source</p>
      </footer>
    </div>
  );
};

export default App;